<template>
    <aside style="background:#545c64;height:100%;" :style="{width:lw}">
        <el-row>
            <el-col :span="4">
                <el-menu
                        class="el-menu-vertical-demo"
                        default-active="/"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        :collapse="isCollapse"
                        :router='true'
                >
                    <el-menu-item index="0" @click="changeLw">
                        <i :class="isCollapse? 'el-icon-s-unfold':'el-icon-s-fold'"></i>
                    </el-menu-item>

                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-s-cooperation"></i>
                            <span>业务管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/">
                                <i class="el-icon-phone-outline"></i>
                                <span>试听列表</span>
                            </el-menu-item>
                            <el-menu-item index="/product">
                                <i class="el-icon-eleme"></i>
                                <span>产品列表</span>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <i class="el-icon-user"></i>
                                <span>讲师列表</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </aside>
</template>
<script>
    export default {
        name: "navleft",
        data() {
            return {
                isCollapse: false,
                lw: "200px"
            };
        },
        created() {
            this.getlist()
        },
        methods: {
            changeLw() {
                this.isCollapse = !this.isCollapse;
                if (this.lw == "200px") this.lw = "70px";
                else this.lw = "200px";
            },

        }
    };
</script>
<style scoped>
</style>